<template>
  <section>
    <el-card>
      <div
        class="table_content"
        style="margin-bottom: 1px"
      >
        <el-row :gutter="4">
          <el-form
            :model="searchDto"
            :inline="true"
            ref="searchForm"
            label-position="left"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="名称" prop="name" class="form-lable">
              <el-input
                v-model="searchDto.name"
                placeholder="请输入名称"
                class="mr10 it350 wanner"
              />
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-circle-plus"
          @click="showUserViewTrue()"
        >新增热词
        </el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="getPageData()"
          icon="el-icon-search"
        >查询
        </el-button
        >
        <el-button
          type="primary"
          icon="el-icon-remove"
          size="small"
          @click="resetForm()"
        >重置
        </el-button
        >
      </div>
      <page-table :page-data="hotWordList" :loading="loading" :do-get-page-data="getPageData">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          sortable
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="管理"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                size="mini"
                icon="el-icon-edit"
                @click="userEdit(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="删除" placement="top">
              <el-button
                size="mini"
                icon="el-icon-delete"
                @click="userDel(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </el-card>

    <el-dialog
      :visible.sync="showEditorHotWord"
      title="编辑/新增 热词:"
      width="40%"
    >
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="hotInfo"
            :rules="rules"
            :model="hotInfo"
            label-width="80px"
          >
            <el-form-item label="热词:" prop="name">
              <el-input v-model="hotInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
              <el-input-number v-model="hotInfo.sort"></el-input-number>
            </el-form-item>
            <el-form-item>
                    <span style="float: left;">
                      <el-button
                        type="primary"
                        size="small"
                        @click="saveData('hotInfo')"
                      >保存</el-button
                      >
                    </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
  export default {
    name: "hotWord",
    created() {
    },
    mounted() {
      this.getPageData()
    },
    data() {
      return {
        searchDto: {
          name: "",
          pageSize: 10
        },
        rules: {
          name: {required: true, message: "请输入热词", trigger: "blur"},
          sort: {required: true, message: "请输入排序", trigger: "blur"}
        },
        showEditorHotWord: false,
        hotWordList: {},
        loading: false,
        hotInfo: {
          name: '',
          sort: ''
        }
      };
    },
    computed: {},

    methods: {
      //重置搜索数据
      resetForm() {
        this.searchDto = {
          name: "",
          pageSize: 10
        }
        this.getPageData()
      },
      // 重置新增表单
      resetHotInfo () {
        this.hotInfo = {
          name: '',
          sort: ''
        }
        this.getPageData()
      },
      //新建
      showUserViewTrue() {
        this.showEditorHotWord = true;
      },
      // 热词编辑
      userEdit(val) {
        this.hotInfo =val
        this.showEditorHotWord = true;
      },

      // 热词删除
      userDel(id) {
        this.$confirm("确认删除该数据?", "提示").then(() => {
           this.API.delAllHotUsingPOST({"saveHotDto": {"ids": id}}).then(res=> {
             this.getPageData()
           })
        });
      },
      // 获取分页数据
      getPageData(search) {
        let tem = Object.assign(this.searchDto, search);
        this.API.hotListUsingPOST({"baseHotSearchDto": tem}).then(res => {
          this.hotWordList = res.data
        })
      },
      // 保存数据
      saveData(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.API.saveOrupdateHotUsingPOST({'saveHotDto': this.hotInfo}).then(res => {
              this.showEditorHotWord = false
              this.resetHotInfo()
            })
          } else {
            return false;
          }
        });
      }
    },
    components: {}
  };
</script>
<style scoped lang="less">
  .wanner {
    margin-left: -55px;
    padding-right: 80px;
    width: 200px;
  }

  .el-select {
    width: 218px !important
  }

  .form-lable > :first-child {
    font-size: 16px;
  }
</style>
